<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>发布文章</title>
    <link rel="stylesheet" href="/assets/lib/layui/css/layui.css">
    <!-- 图片裁剪 -->
    <link rel="stylesheet" href="/assets/lib/cropper/cropper.css">
    <link rel="stylesheet" href="/assets/css/article/articlePublish.css">
</head>

<body>

    <div class="layui-card">
        <div class="layui-card-header">发布文章</div>
        <div class="layui-card-body">
            <form class="layui-form" lay-filter="formDemo" id="formBox">
                <div class="layui-form-item">
                    <label class="layui-form-label">文章标题</label>
                    <div class="layui-input-block">
                        <input type="text" name="title" required lay-verify="required" placeholder="请输入文章标题"
                            autocomplete="off" class="layui-input" >
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">文章类别</label>
                    <div class="layui-input-block">
                        <select name="cate_id" id="classifyBox" >
                            <option value="">请选择文章标题</option>
                        </select>
                        <script type="text/html" id="classifyTemp" >
                            <option value="">请选择文章类别</option>
                            {{each data}}
                            <option value={{$value.id}}>{{$value.name}}</option>
                            {{/each}}
                        </script>
                    </div>
                </div>
                <!-- 文章内容 -->
                <div class="layui-form-item">
                    <label class="layui-form-label">文章内容</label>
                    <div class="layui-input-block my-editor">
                        <div id="editor"></div>
                        <textarea name="content"></textarea>
                    </div>
                </div>
                <!-- 文章封面 -->
                <div class="layui-form-item">
                    <!-- 左侧的 label -->
                    <label class="layui-form-label">文章封面</label>
                    <!-- 选择封面区域 -->
                    <div class="layui-input-block cover-box">
                        <!-- 左侧裁剪区域 -->
                        <div class="cover-left">
                            <img id="image" src="/assets/images/sample2.jpg" alt="" class="cropper-hidden">
                        </div>
                        <!-- 右侧预览区域和选择封面区域 -->
                        <div class="cover-right">
                            <!-- 预览的区域 -->
                            <div class="img-preview" style="width: 300px; height: 150px;"> </div>
                            <!-- 选择封面按钮 -->
                            <input type="file" id="file" style="display: none;"
                                accept="image/png,image/jpeg,image/gif" />
                            <button type="button" class="layui-btn layui-btn-danger btn-choose-img"
                                id="btnChooseImg">选择封面</button>
                        </div>
                    </div>
                </div>
                <!-- 按钮 -->
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" id="bntSave1" lay-submit>发布</button>
                        <button class="layui-btn layui-btn-primary" id="bntSave2" lay-submit>存为草稿</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</body>
<script src="/assets/lib/layui/layui.all.js"></script>
<!-- jquery -->
<script src="/assets/lib/jquery.js"></script>
<script src="/assets/js/baseApi.js"></script>
<!-- 富文本 -->
<script src="/assets/lib/tinymce/tinymce.min.js"></script>
<script src="/assets/lib/tinymce/tinymce_setup.js"></script>
<!-- 图片裁剪 -->
<script src="/assets/lib/cropper/Cropper.js"></script>
<script src="/assets/lib/cropper/jquery-cropper.js"></script>
<script src="/assets/lib/template-web.js"></script>

<script>
    $(function () {
        const { form, layer } = layui;
        initEditor();//初始化富文本编辑器
        initClassify();//初始化文章分类列表
        function initClassify() {
            $.ajax({
                type: 'get',
                url: '/my/article/cates',
                success(res) {
                    console.log(res);
                    if (res.status === 0) {
                        const html = template('classifyTemp', { data: res.data });
                        // console.log(html);
                        $("#classifyBox").html(html)
                        form.render();
                        editArt();//渲染编辑文章
                    }
                }
            })
        }
        // 1. 获取裁剪区域
        const $image = $('#image')

        // 2. 定义配置对象
        const options = {
            // 纵横比
            aspectRatio: 1,
            // 指定预览区域
            preview: '.img-preview',
            // 视图模式
            viewMode: 2
        }
        //3.创建裁剪区域
        $image.cropper(options)

        // 为选择图片的按钮绑定点击事件处理函数
        $('#btnChooseImg').on('click', function () {
            // 模拟文件选择框的点击事件
            $('#file').click()
        })

        // 为文件选择框绑定 change 事件
        $('#file').on('change', function (e) {
            const files = e.target.files
            if (files.length === 0) return

            // 基于给定的文件创建 URL 地址
            const imgURL = URL.createObjectURL(files[0])
            $image
                .cropper('destroy')  //销毁旧的裁剪区域
                .attr('src', imgURL) //重新设置图片路径
                .cropper(options)    //重新初始化裁剪区域
        })

        //定义文章发布状态
        let art_state = '已发布'
        $("#bntSave2").on('click', function () {
            art_state = '草稿'
        })
        $("#formBox").on('submit', function (e) {
            e.preventDefault();//阻止表单默认行为
            let fd = new FormData($(this)[0]);//创建formData对象
            fd.append('state', art_state);//追加状态值
            let dataURL = $image
                .cropper('getCroppedCanvas', {
                    // 创建一个 Canvas 画布
                    width: 150,
                    height: 100
                })
                .toBlob(function (blob) {// 将 Canvas 画布上的内容，转化为文件对象
                    fd.append('cover_img', blob);//追加文章封面数据
                    fd.forEach(function (v, k) {
                        console.log(k, v);
                    })
                    $.ajax({//提交准备好的数据 
                        type: 'post',
                        url: '/my/article/add',
                        data: fd,
                        contentType: false,
                        processData: false,
                        success(res) {
                            console.log(res);
                            layer.msg(res.message);
                            if (res.status === 0) {
                                location.href = '/article/articleList.html'
                            }
                        }
                    })
                })
        })
        //编辑文章方法
        function editArt() {
            var temp = new URLSearchParams(location.search);
            console.log(temp);
            var uid = temp.get('uid');
            console.log(uid);
            if (uid) {
                console.log('跳过来的');
                $.ajax({
                    type:'get',
                    url:'/my/article/'+uid,
                    success(res){
                        console.log(res);
                        $("[name=title]").val(res.data[0].title)
                        console.log(res.data[0].title);
                        $("[name=content]").html(res.data[0].content)
                        $("[name=cate_id]").find(`option[value=${res.data[0].cate_id}]`).attr('selected',true)
                        console.log(res.data[0].cover_img);

                       let imgUrlStr = res.data[0].cover_img.replace(/\\/g, '/')
                       imgUrlStr = 'http://localhost:8080'+imgUrlStr
                       console.log(imgUrlStr);                       
                        
                         $image
                            .cropper('destroy')  //销毁旧的裁剪区域
                            .attr('src', imgUrlStr) //重新设置图片路径
                            .cropper(options)    //重新初始化裁剪区域

                        form.render()   
                        // http://localhost:8080
                    }
                })
            }
        }
       
    })

</script>

</html>